<template>
    <el-container class="main">
        <el-aside class="main_side">
            <el-container class="main_side_container">
                <el-header class="main_side_header">
                    <button class="main_side_header_button" @click="$emit('back')">
                        <Undo2 class="icon" />
                    </button>
                </el-header>
                <el-main class="main_side_main">
                    <AIChat :content="text" />
                </el-main>
            </el-container>

        </el-aside>

        <el-main class="main_main">
            <!-- <button class="button" @click="markEditor()">
                <SquarePen class="icon" />
            </button>
            <button class="button" @click="markEditor()">
                <Save class="icon" />
            </button> -->
            <!-- <MdEditor class="editor-toolbar" :autofocus="true" :toolbarsFlag="true" :language="'zh-CN'"
                :defaultValue="text" v-model="text" /> -->
            <v-md-editor v-model="text" height="400px"></v-md-editor>
        </el-main>

    </el-container>

</template>

<script setup>
import { ref, reactive, provide, defineProps } from 'vue';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import AIChat from '../AI/AIChat.vue';
import { ArrowLeftRight, SquarePen, Undo2 } from 'lucide-vue-next';
import { article } from 'motion/react-client';

const props = defineProps({
    articleEditor: {
        type: Boolean,
        default: false
    }
})

let articleEditor = ref(props.articleEditor)

function markPreview() {
    $emit('back', articleEditor.value);
}

let toolBars = reactive({
    customToolbar1: {
        title: '基础工具栏',
        icon: 'v-md-icon-tip',
        action(editor) {
            editor.insert(function (selected) {
                const prefix = '(((';
                const suffix = ')))';
                const placeholder = '请输入文本';
                const content = selected || placeholder;

                return {
                    text: `${prefix}${content}${suffix}`,
                    selected: content,
                };
            });
        },
    },
})
const text = ref('Hello Editor!');
provide('text', text);
</script>

<style scoped lang="scss">
.main {

    &_side {
        width: 20%;

        .main_side_container {
            width: 100%;
            height: 100%;
        }

        .main_side_header {
            height: 50px;
            display: flex;
            justify-content: center;

            &_button {
                background: none;
                border: none;
                padding: 4px;
                margin-right: 8px;
                cursor: pointer;
                color: #666;

                &:hover {
                    color: #4185F4;
                }

                .icon {
                    width: 16px;
                    height: 16px;
                }
            }
        }
    }

    &_main {
        width: 80%;
    }

    .markdown-body {
        width: 100%;
        height: 90vh;
    }

}

.el-main {
    // width: 70%;

    .markdown-body {
        width: 100%;
        height: 90vh;
    }
}

.el-aside {
    width: 20%;
}

.editor-toolbar {
    // zoom: 1.3;
    /* 放大工具栏 */
    /* 或者使用 transform 属性 */
    // transform: scale(1.5);
    transform-origin: left top;
}
</style>